<template>
    <div class="isDialog">
        <div>
            <el-form :model="formParam" label-width="90px" :inline="true">
                <el-form-item label="单据编号：">
                    <el-input v-model="formParam.number" placeholder="请输入单据编号" clearable></el-input>
                </el-form-item>
                <el-form-item label="商品信息：">
                    <el-input v-model="formParam.name" placeholder="条码/名称/规格/型号" clearable></el-input>
                </el-form-item>
                <el-form-item label="单据日期：">
                    <el-date-picker type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
                        date-format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 280px; margin-left: 10px;"
                        v-model="createTimeRange" unlink-panels />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findMenyimpanPage">查询</el-button>
                    <el-button @click="exportBtn">
                        <el-icon class="el-icon--left">
                            <Download />
                        </el-icon>
                        导出
                    </el-button>
                    <el-button type="primary" size="default" link @click="visibleClick">
                        {{ visible ? '收起' : '展开' }}
                        <el-icon :style="{ transform: visible ? 'rotate(180deg)' : 'rotate(0deg)' }">
                            <ArrowUp />
                        </el-icon>
                    </el-button>
                </el-form-item>

                <div>
                    <div v-if="visible">
                        <el-form-item label="调出仓库：">
                            <el-select v-model="formParam.depotId" placeholder="请选择仓库" clearable filterable>
                                <el-option v-for="item in depot" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="调入仓库：">
                            <el-select v-model="formParam.anotherDepotId" placeholder="请选择仓库" clearable filterable>
                                <el-option v-for="item in depot" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注：">
                            <el-input v-model="formParam.remark" placeholder="请输入备注"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
        <div>
            <el-table :data="page.records" ref="tableRef" border show-summary :summary-method="getSummaries" stripe
                max-height="489px">
                <el-table-column type="index" label="#" align="center" width="60" />
                <el-table-column v-for="col in tableHeader" :prop="col.prop" :key="col.id" :label="col.label"
                    :width="col.width" :sortable="col.sortable">
                    <template #default="scope">
                        <el-button v-if="col.prop === 'number'" type="primary" link
                            @click="getDetail(scope.row.number)">
                            {{ scope.row.number }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div>
            <Pagination :current="page.current" :page-size="page.size" :total="page.total" @change=""
                @update:pageSize="sizeChange" @update:current="currentChange" />
        </div>

        <el-dialog :title="title" v-model="dialogVisible" :destroy-on-close="true" draggable width="85%">
            <Allocate :depot-head="depotHead" @close="close" />
        </el-dialog>
    </div>



</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDepotHead } from '@/components/material_bill_detail/js/Stoke'
import { getMemperuntukkanTableHead } from '@/components/material_bill_detail/js/getTableHead'
import { exportTable } from '@/utils/xlsx';

import request from '@/api/request'
import Pagination from '@/components/pagination/Index.vue'
import Allocate from '@/components/material_bill_detail/Allocate.vue'

let visible = ref(false)
let title = ref('')
let dialogVisible = ref(false)

const formParam = ref({})

let createTimeRange = ref(null)

let depot = ref([])

const tableRef = ref(null)

const tableHeader = ref([])

let actualRetailMoney = ref(null)

let depotHead = ref({})

const page = ref({
    current: 1,
    size: 5,
    pages: 1,
    total: 1,
    records: null
});

const findMenyimpanPage = async () => {
    if (createTimeRange.value) {
        formParam.value.createTime = createTimeRange.value[0]
        formParam.value.endTime = createTimeRange.value[1]
    } else {
        formParam.value.createTime = null
        formParam.value.endTime = null
    }

    await request.get('report/findAllocateDepotPage', {
        params: {
            ...formParam.value, current: page.value.current, size: page.value.size, type: '出库'
        }
    }).then(resp => {
        page.value = resp.data
    })

}

const getDetail = async (headNumber) => {
    depotHead.value = await getDepotHead(headNumber)
    title.value = depotHead.value.subType + depotHead.value.type + '-详情'
    dialogVisible.value = true
}

const sizeChange = (pageSize) => {
    page.value.size = pageSize;
    findMenyimpanPage()
}

const currentChange = (pageCurrent) => {
    page.value.current = pageCurrent;
    findMenyimpanPage()
}

const exportBtn = () => {
    exportTable(tableRef, '调拨明细报表')
}

const visibleClick = () => {
    visible.value = !visible.value
};

const findDepotByTenantId = async () => {
    await request.get("depot/findDepotByTenantId")
        .then(resp => {
            depot.value = resp.data
        })
}

const getTableHead = () => {
    tableHeader.value = getMemperuntukkanTableHead()
}



/**
 * 设置表尾合计
 * @param param 表格数据
 */
const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];

    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = "合计";
            return;
        }
        if (Array.isArray(data)) {
            const values = data.map((item) => Number(item[column.property]));
            // 想合并哪些列就在这里指定
            if (column.property === "operNumber" || column.property === "allPrice"
                || column.property === "taxMoney") {
                sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                }, 0);
                if (column.property === "actualRetailMoney") {
                    actualRetailMoney.value = sums[index]
                }
            }
        }
    });
    return sums;
}

const close = () => {
    dialogVisible.value = false
}

onMounted(() => {
    findDepotByTenantId()
    getTableHead()

    findMenyimpanPage()
})
</script>

<style scoped>
.el-select {
    width: 250px;
}

.el-input {
    width: 250px;
}
</style>
